এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।
সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ
একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।
search সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-color: ForestGreen;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড কালার</h1>
<p>এই পেজটির ব্যাকগ্রাউন্ডের কালার ForestGreen সেট করা হয়েছে।</p>
</body>
</html>
search সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ
সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।
নিচের উদাহরণে < h1>, < p> এবং < div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h2 {
background-color: blue;
color: white;
}
div {
background-color: green;
}
p {
background-color: red;
}
</style>
</head>
<body>
<h2>CSS এর মাধ্যমে ব্যাকগ্রাউন্ডে কালার দেয়ার উদাহরণ।</h1>
<div>
এটি একটি div এলিমেন্ট।
<p>এই প্যারাগ্রাফটির নিজস্ব ব্যাকগ্রাউন্ড কালার দেয়া আছে.</p>
আমরা এখনো div এলিমেন্টের মধ্যে আছি।
</div>
</body>
</html>এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।
সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।
একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper.jpg");
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এই পেইজের ব্যাকগ্রাউন্ডে একটি ইমেজ দেয়া আছে।</p>
</body>
</html>ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট কালারের সঠিক সমন্বয় না হলে লেখা পড়তে সমস্যা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper.jpg");
color: sienna;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ড ইমেজের জন্য লেখাগুলো সঠিকভাবে পড়া যাচ্ছে না।</p>
</body>
</html>বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।
background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।
কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটি দেখতে অদ্ভুত লাগছে!!!</p>
<br><br><br><br><br><br><br><br>
</body>
</html>
বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।
শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এখানে ব্যাকগ্রাউন্ডের ইমেজটি শুধুমাত্র x অক্ষে রিপিট করেছে।</p>
<br><br><br><br><br><br><br><br>
</body>
</html>পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।
আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ড ইমেজটি একবার প্রদর্শিত হবে কিন্তু এটি পাঠককে পড়ায় বিরক্তির সৃষ্টি করে।</p>
</body>
</html>
উপরোক্ত উদাহরণে, টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজকে একই জায়গায় দেখানো হয়েছে। আপনি চাইলে ইমেজের পজিশন পরিবর্তন করতে পারেন যাতে ইহা টেক্সটসমূহ পড়তে কোনো সমস্যা না করে।
background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটিতে no-repeat পজিশন দেয়া আছে।</p>
<p>ইমেজটি একবার প্রদর্শিত হবে এবং তা ব্রাউজারের উপরের ডানে থাকবে।</p>
<p>এই উদাহরণটিতে ইমেজটিতে মার্জিন ব্যবহার করা হয়েছে যাতে ইমেজটি পাঠককে পড়ার সময় বিরক্তির সৃষ্টি না করে।</p>
</body>
</html>ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background-image: url("paper2.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
<p>ব্যাকগ্রাউন্ডের ইমেজটি ফিক্সড করে দেয়া হয়েছে। পেজটি scroll করুন।</p>
</body>
</html>কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে
background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
background: #ffffff url("paper2.jpg") no-repeat right top;
margin-right: 250px;
}
</style>
</head>
<body>
<h1>ব্যাকগ্রাউন্ড ইমেজের ব্যবহার</h1>
<p>এখন ব্যাকগ্রাউন্ডের ছবিটি একবারই দেখা যাবে এবং এটিকে টেক্সট থেকে সরিয়ে নেওয়া হয়েছে।</p>
<p>এই উদাহরণের ডানপাশে মার্জিন যোগ হয়েছে, যাতে ছবিটি পাঠককে পড়ার সময়ে কোন ধরনের বিরক্তির সৃষ্টি না করতে পারে।</p>
</body>
</html>যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionঅন্য সবগুলো প্রোপার্টির ক্রম ঠিক থাকলে একটি প্রোপার্টির মান অনুপস্থিত থাকলেও কোন সমস্যা হবে না।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
